<!--  -->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="模板配置" name="first">
        <el-form :inline="true" size="small">
          <el-form-item label="模板编号">
            <el-input
              v-model="modelId"
              placeholder="请输入字符编号"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板名称">
            <el-input
              v-model="modelName"
              placeholder="请输入字符编号"
              size="small"
            ></el-input>
          </el-form-item>

          <el-button icon="el-icon-search" type="primary" size="small" @click
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
          <el-button
            icon="el-icon-edit"
            type="warning"
            size="small"
            @click="add"
            >新增</el-button
          >
          <el-button icon="el-icon-delete" type="danger" size="small" @click
            >删除</el-button
          >
        </el-form>

        <div style="margin-top:20px">
          <el-table :data="tData" border stripe>
            <el-table-column type="selection" align="center" width="60" />
            <template v-for="(col, index) in columns">
              <el-table-column
                :prop="col.data"
                :key="col.id"
                :label="col.label"
                align="center"
                :width="col.width"
              ></el-table-column>
            </template>
            <el-table-column label="操作" align="center" width="170">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="edit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  style="color:#F56C6C;"
                  @click="del(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="pageData.page"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="pageData.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="短信接口配置" name="second">
        <div style="display:flex;padding:30px 0 0 100px">
          <span for="msgApi">短信接口编辑：</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 8 }"
            placeholder="请输入内容"
            style="width:600px"
            v-model="msgApi"
          ></el-input>
        </div>
        <div style="display:flex;padding:30px 0 0 400px">
          <el-button type="primary" size="default" @click>保存</el-button>
          <el-button size="default" @click>重置</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showDialog"
      width="40%"
      @close="showDialog = false"
    >
      <el-form
        :model="addForm"
        ref="form"
        :rules="rules"
        label-width="120px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="模板编号" prop="id">
          <el-input v-model="addForm.id" style="width:60%"></el-input>
        </el-form-item>
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="addForm.name" style="width:60%"></el-input>
        </el-form-item>
        <el-form-item label="模板内容" prop="url">
          <el-input v-model="addForm.con" style="width:60%"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click>立即创建</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      modelId: "",
      modelName: "",
      msgApi: "",
      showDialog: false,
      dialogTitle: "新增",
      rules: {},
      i: "",
      pageData: {
        page: 1,
        limit: 10
      },
      total: 10,
      addForm: {},
      tData: [
        {
          id: "1",
          name: "短信模板111",
          content: "内容1123123123"
        },
        {
          id: "2",
          name: "短信模板111",
          content: "内容1123123123"
        },
        {
          id: "3",
          name: "短信模板111",
          content: "内容1123123123"
        },
        {
          id: "4",
          name: "短信模板111",
          content: "内容1123123123"
        }
      ],
      rules: {
        id: [{ required: true }],
        name: [{ required: true }],
        content: [{ required: true }]
      },
      columns: [
        { key: 0, label: `模板编号`, data: "id", width: 80 },
        { key: 1, label: `模板名称`, data: "name", width: 240 },
        { key: 1, label: `模板内容`, data: "content" }
      ]
    };
  },
  created() {},
  methods: {
    add() {
      this.showDialog = true;
    },
    edit() {
      this.showDialog = true;
    },
    del(i) {
      this.$confirm("确认删除所选数据？", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(r => {
          if (r == "confirm") {
            this.tData.splice(i, 1);
            this.$message.warning("删除成功！");
          }
        })
        .catch(() => {});
    },
    save() {
      this.$message.success("保存成功！");
    },
    refresh() {
      this.$message.success("重置成功！");
    },
    sizeChange() {},
    beforeCoverUpload() {},
    currentChange() {}
  }
};
</script>
<style>
.sok {
  color: #5cb87a;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #5cb87a;
  background: #fff;
  border-radius: 5px;
}
.sfail {
  color: #f56c6c;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #f56c6c;
  background: #fff;
  border-radius: 5px;
}
.btnBox {
  height: 130px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.btnBox .el-button {
  margin: 0;
}
.detailLog div {
  margin: 10px;
  color: #000;
  font-size: 16px;
}
.detailLog .dbox {
  display: flex;
  flex-wrap: wrap;
}
.detailLog .dbox > div {
  width: 46%;
  margin: 10px 0;
}
</style>
